<template>
  <div>
    <el-row :gutter="10">
      <el-col
        :span="2"
        style="position:absolute; padding-top:20px;padding-left:30px;"
      >
        <el-button type="primary" plain icon="el-icon-arrow-left"
          >返回</el-button
        >
      </el-col>
      <el-col :span="20" style="position:relative;left:150px;top:10px;">
        <div>
          <h3>绩效考核</h3>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 表格 -->
    <el-row>
        <el-col :span="22" :offset="1">
            <el-table :data="taskList" border fit>
               <el-table-column type="index" align="center"></el-table-column>
               <el-table-column prop="task" align="center" label="任务描述" ></el-table-column>
               <el-table-column prop="start" align="center" label="开始时间"></el-table-column>
               <el-table-column prop="end" align="center" label="截止时间"></el-table-column>
               <el-table-column prop="executors" align="center" label="执行人员">
                   <template slot-scope="scope">
                      <el-tag  v-for="(item,index) in scope.row.executors" :key="index" type="primary" disable-transitions style="margin:0 5px;">{{item}}</el-tag>
                   </template>
               </el-table-column> 
               <el-table-column  label="项目完成情况" align="center" width="350">
                    <template slot-scope="{row}">
                      <template v-if="row.edit">
            <el-input v-model="row.completion" class="edit-input" size="small" placeholder="请输入项目完成情况，如10%" />
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row)">
              cancel
            </el-button>
                      </template>
                      <span v-else>{{ row.completion }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="Actions">
                 <template slot-scope="{row}">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check-outline"
            @click="confirmEdit(row)">
            Ok
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="row.edit=!row.edit">
            Edit
          </el-button>
                 </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
             <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="[5,10,15,20,40]"
               :page-size="limit"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
               style="float:right;margin-top:30px;">
            </el-pagination>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import {getTaskList,TaskCompletion} from '@/api/performance'
  export default {
    data() {
      return {
        limit:10,
        currentPage:1,
        total:0,
        taskList:[]
      }
    },
    mounted(){
        this.getTaskList()
    },
    methods:{
        //获取任务列表
        async getTaskList(){
            const res = await getTaskList()
            if(res.code===200){
                this.total=res.data.total
                this.taskList=res.data.taskList
                this.taskList = this.taskList.map(v => {
                    this.$set(v, 'edit', true) // https://vuejs.org/v2/guide/reactivity.html
                    v.originalCompetition = "0%" //  will be used when user click the cancel botton
                    return v
                })
            }
        },
        cancelEdit(row) {
            row.completion = row.originalCompetition
            row.edit = false
        },
        async confirmEdit(row) {
          if(row.completion==="") row.completion="0%"
          else {
            const res = await TaskCompletion(row.taskId,row.completion)
            if(res.code===200) row.originalCompetition = row.completion
          }
          row.edit = false
        },
        handleSizeChange(limit){
          this.limit=limit
          this.getTaskList(this.limit,this.currentPage)
        },
        handleCurrentChange(currentPage){
          this.currentPage=currentPage
          this.getTaskList(this.limit,this.currentPage)
        }
    }
  }
</script>


<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>